<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .top {
            width: 100%;
            height: 160px;
        }
        
        ul {
            width: 100%;
            height: 80px;
            background-color: black;
        }
        
        ul>li {
            width: 13%;
            height: 80px;
            float: left;
            color: white;
            text-align: center;
            line-height: 80px;
            list-style: none;
        }
        
        .top {
            background-color: red;
            width: 100%;
        }
        
        #Q-nav1 {
            width: 100%;
            height: 80px;
            margin-top: 0px;
        }
        
        .fixed {
            position: fixed;
            top: 0;
            z-index: 20;
            width: 100%;
            overflow: hidden;
            background: #fff;
            padding-bottom: .1rem;
        }
        
        .mian {
            width: 100%;
            height: 2000px;
            background-color: rosybrown;
        }
    </style>
</head>

<body>
    <div class="top" id="top">

    </div>
    <div id="Q-nav1">
        <ul>
            <li>体育首页</li>
            <li>中国足球</li>
            <li>亚冠</li>
            <li>中超</li>
            <li>国足</li>
            <li>中甲</li>
            <li>视频直播</li>
        </ul>
    </div>
    <div class="main" id="main" style="background-color: royalblue;width: 500px;height: 2000px;margin: 0 auto;">
    </div>


</body>
<script>
    function scroll() {
        if (window.pageYOffset !== undefined) {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        } else if (document.compatMode === "CSS1Compat") {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return {
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
    $(function() {
        var height = $("#top").height();
        window.onscroll = function() {
            if (scroll().top > height) {
                $("#Q-nav1").addClass("fixed");
                $("#mian").css("padding-top", $("Q-nav1").offsetHeight + "px");
            } else {
                $("#Q-nav1").removeClass("fixed");
                $("#mian").css("padding-top", "0");
            }
        }
    });
</script>

</html>